<template>
  <div class="destination-detail">
    <div v-if="destination" class="detail-content">
      <div class="header">
        <img :src="destination.imageUrl" :alt="destination.name">
        <div class="header-info">
          <h1>{{ destination.name }}</h1>
          <p class="location">{{ destination.city }}</p>
          <div class="rating">
            <el-rate
              v-model="destination.averageRating"
              disabled
              show-score
              text-color="#ff9900"
            />
            <span>{{ destination.commentCount }}条评论</span>
          </div>
        </div>
      </div>

      <div class="description">
        <h2>景点介绍</h2>
        <p>{{ destination.description }}</p>
      </div>

      <div class="comments">
        <h2>游客评论</h2>
        <CommentForm
          v-if="destination"
          :target-id="destination.id"
          target-type="DESTINATION"
          @success="fetchComments"
        />
        <div class="comment-list">
          <div v-for="comment in comments" :key="comment.id" class="comment-item">
            <div class="comment-header">
              <el-avatar :src="comment.user.avatar" :size="40">
                {{ comment.user.nickname.charAt(0) }}
              </el-avatar>
              <div class="comment-info">
                <span class="nickname">{{ comment.user.nickname }}</span>
                <el-rate
                  v-model="comment.rating"
                  disabled
                  size="small"
                />
              </div>
            </div>
            <p class="comment-content">{{ comment.content }}</p>
            <div class="comment-footer">
              <span class="time">{{ formatDate(comment.createdTime) }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useDestinationDetail } from '@/ts/pages/destination-detail'
import CommentForm from '@/components/common/CommentForm.vue'
import '@/css/pages/destination-detail.css'

const { destination, comments, formatDate, fetchComments } = useDestinationDetail()
</script> 